<template>
  <div>
    <h1 v-if="!routeAdd">新增banner数据</h1>
    <h1 v-else>修改banner数据</h1>
    <hr />
    <el-form label-width="80px" :model="form" :rules="rules" ref="form">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="封面">

        <el-upload
          class="upload-demo"
          action="http://47.114.72.133:8088/insurance_war/file/upload"
          :on-success="handlePreview"
          
          :file-list="fileList"
          :limit="1"
          list-type="picture"
        >
          <el-button size="small" type="primary">浏览</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="创建时间" prop="create_time">
        <el-date-picker
          v-model="form.create_time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="请选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="作品链接" prop="link">
        <el-input v-model="form.link"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "BannerAdd",
  data() {
    return {
      form: {
        cimage: "",
        count: "",
        create_time: "",
        is_enable: "",
        link: "",
        link_type: "",
        piror: "",
        title: "",
      },
      routeAdd:this.$route.query.row,
      fileList: [],
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        link: [{ required: true, message: "请输入作品链接", trigger: "blur" }],
        create_time: [
          {
            required: true,
            message: "请选择创建日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    
    //上传图片触发事件
    handlePreview(response, file) {
      // console.log(response, file, fileList);

      let that = this;
      that.form.cimage = "http://47.114.72.133:8088/insurance_war/" + response.fileName ;
      that.form.link_type = file.raw.type
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.routeAdd) {
            this.$http({
              url: "/banner/add",
              method: "POST",
              data: {
                cimage: this.form.cimage,
                count: 0,
                create_time: this.form.create_time,
                is_enable: true,
                link: this.form.link,
                link_type: this.form.link_type,
                piror: 0,
                title: this.form.title,
              },
            })
              .then((res) => {
                console.log("请求成功：", res);
                this.$router.push("/banner");
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.log("请求失败：", err);
              });
          } else {
            this.$http({
              url: "/banner/update",
              method: "POST",
              data: {
                id: this.routeAdd.id,
                cimage: this.form.cimage,
                count: 0,
                create_time: this.form.create_time,
                is_enable: this.routeAdd.is_enable,
                link: this.form.link,
                link_type: this.form.link_type,
                piror: 0,
                title: this.form.title,
              },
            })
              .then((res) => {
                console.log("请求成功：", res);
                this.$router.push("/banner");
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.log("请求失败：", err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    giveInfo() {
      this.form.cimage = this.routeAdd.cimage;
      this.form.create_time = this.routeAdd.create_time;
      this.form.link = this.routeAdd.link;
      this.form.title = this.routeAdd.title;
    },
  },
  created() {
    this.giveInfo();
  },
};
</script>

<style lang="scss" scoped>
h1 {
  margin-bottom: 10px;
}

.el-form {
  margin-top: 15px;
}
</style>